<script setup lang="ts">
import { getCurrentInstance, reactive, nextTick } from 'vue'
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'
const { proxy } = getCurrentInstance()

/* ---- */
const slide = reactive({
  show: false,
  shade: false,
  box: false,
  // ----
  type: 0,
  boxTop: {},
  slideName: '',
  boxClass: '',
  title: '',
  // ----
  listClass: '',
  option: {},
  // --mescroll--
  noData: proxy.$Global.noData,
  mescroll: null,
  items: []
})

/* ---- */
const open = (opt) => {
  // ----
  if (opt) {
    for (const key in opt) { slide[key] = opt[key] }
  }
  slide.show = true
  // ----
  nextTick(() => {
    slide.shade = true
    slide.box = true
    // --创建MeScroll对象--
    if (Number(Object.keys(slide.option).length) > 0) setTimeout(() => { startMeScroll() }, 500)
  })
}
const close = () => {
  slide.shade = false
  slide.box = false
  // ----
  slide.type = 0
  // ----
  setTimeout(() => {
    slide.show = false
    slide.items = []
  }, 300)
}
// --getData--
const startMeScroll = () => {
  slide.mescroll = new MeScroll(proxy.$refs.dataScroll, {
    up: {
      callback: getListData,
      isBounce: false,
      page: slide.option.page,
      htmlNodata: slide.option.htmlNodata,
      noMoreSize: slide.option.noMoreSize,
      toTop: {
        src: '/pics/mescroll-totop.png',
        offset: 1000
      },
      empty: {
        warpId: proxy.$refs.dataList,
        tip: slide.noData
      }
    }
  })
}
const getListData = (page) => {
  const forExtend = {
    params: {
      page: page.num,
      PageSize: page.size
    }
  }
  Object.assign(forExtend.params, slide.option.data)
  // ----
  getListDataFromNet({
    forUrl: slide.option.url,
    forData: forExtend
  }, page.num, page.size, (curPageData) => {
    proxy.$emit('setData', curPageData, (result) => {
      slide.mescroll.endSuccess(curPageData ? curPageData.length : 0, true)
      slide.items = slide.items.concat(result)
    })
  }, (resMsg) => {
    slide.mescroll.endErr()
    proxy.$Myfun.forToast(layer.value, 'open', resMsg)
  })
}
const getListDataFromNet = (option, pageNum, pageSize, successCallback, errorCallback) => {
  if (Number(pageNum) === 1) {
    if (document.querySelector('.upwarp-nodata')) { document.querySelector('.upwarp-nodata').style.visibility = 'hidden' }
    slide.items = []
  }
  // ----
  proxy.$http.get(option.forUrl, option.forData).then((res) => {
    successCallback && successCallback(res.items)
  }).catch((err) => { errorCallback && errorCallback(err) })
}

/* ---- */
defineExpose({
  open
})
</script>

<template>
  <div class="mescroll-touch slideBox" v-if="slide.show">
    <transition name="fade">
      <div class="mask" v-if="slide.shade" @click="close"></div>
    </transition>
    <transition :name="slide.slideName" v-if="Number(slide.type) === 0">
      <div :class="['SLB-box', slide.boxClass]" :style="slide.boxTop" v-if="slide.box">
        <div class="SLB-box-con">
          <div class="SLB-column xw-flex xw-flex-align xw-flex-justify">
            <span>{{slide.title}}</span>
            <em class="xw-act" @click="close">返回</em>
          </div>
          <div class="SLB-box-body">
            <div ref="dataScroll" class="mescroll">
              <slot name="header"></slot>
              <ul :class="slide.listClass" ref="dataList">
                <slot :data="slide.items"></slot>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<style scoped>
/* ---- */
.slideBox, .mask { position: fixed; z-index: 10000; top: 0; left: 0; right: 0; bottom: 0; }
.mask { background: rgba(0, 0, 0, 0.5); }
/* ---- */
.SLB-box { position: fixed; z-index: 10000; left: 0; right: 0; bottom: 0; }
/* ---- */
.SLB-box-con { position: relative; height: 100%; }
.SLB-column { height: 5rem; }
.SLB-column span { padding: 0 1.2rem; color: #ff5722; font-size: 1.7rem; font-weight: bold; }
.SLB-column em { padding: 1rem 1.2rem; font-size: 1.4rem; }
.SLB-box-body { position: absolute; top: 5rem; right: 0; bottom: 0; left: 0; }
</style>
